<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
		<title>WidgetsInTemplateMixin.js</title>

		<style type="text/css">
			@import "../themes/claro/document.css";
			@import "../themes/claro/claro.css";

			/* Make our tests stand out as easily identifiable content */
			.testcontainer {
				border: 10px yellow;
				border-style: dashed;
				padding: 1em;
				margin: 1em;
			}
			.testcontainer > p {
				padding: 0 1em;
				font-weight: bold;
			}
		</style>

		<script type="text/javascript" src="../../dojo/dojo.js"
			data-dojo-config="isDebug: true, async: true"></script>
		<script type="text/javascript">
			require([
				"doh", "dojo/_base/array", "dojo/_base/declare", "dojo/_base/window", "dojo/dom", "dojo/dom-geometry",
				"dojo/html", "dojo/query", "dojo/parser",
				"dijit/registry", "dijit/_WidgetBase", "dijit/_Widget",
				"dijit/_AttachMixin", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
				"dijit/form/Button", "dijit/form/CheckBox", "dijit/form/TextBox",
				"dijit/ProgressBar", "dijit/layout/ContentPane", "dijit/layout/TabContainer", "dijit/_Container",
				"dijit/_Contained", "dijit/layout/_LayoutWidget", "dijit/tests/resources/TestContextRequireWidget",
				"dijit/focus",
				"dojo/domReady!"
			], function(doh, array, declare, win, dom, domGeom, html, query, parser,
					registry, _WidgetBase, _Widget, _AttachMixin, _TemplatedMixin, _WidgetsInTemplateMixin,
					Button, CheckBox, TextBox, ProgressBar, ContentPane, TabContainer,
					_Container, _Contained, _LayoutWidget, TestContextRequireWidget, focusUtil){

				declare('Test1Widget', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
					templateString: dom.byId('Test1Template').value,
					onClick: function(e){
						if(e.target){
							alert('onClick widgetId='+e.target.id);
						}else{
							if(e._counter == undefined){
								e._counter = 1;
							}else{
								e._counter++;
							}
						}
					}
				});

				declare('Test3Widget', [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
					templateString: dom.byId('Test3Template').value
				});

				declare('Test4Widget', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
					templateString: dom.byId('Test4Template').value
				});
		
				function validateTest4Widget(t, testW){
					var selectedTab = query(".dijitTabChecked", testW.domNode)[0];
					var selectedPane = query(".dijitVisible > .dijitTabPane", testW.domNode)[0];
					var tabBox = selectedTab ? domGeom.getContentBox(selectedTab) : null;
					var paneBox = selectedPane ? domGeom.getContentBox(selectedPane) : null;
					doh.t(tabBox && tabBox.w> 0 && tabBox.h> 0, "tabBox && tabBox.w> 0 && tabBox.h> 0");
					doh.t(paneBox && paneBox.w> 0 && paneBox.h> 0, "paneBox && paneBox.w> 0 && paneBox.h");
					// Check that everything got started
					doh.t(testW._started, "testW._started");
					doh.t(testW.tabCont._started, "tabCont._started");
					doh.t(testW.tab1._started, "tab1._started");
					doh.t(testW.tab2._started, "tab2._started");
				}
			
				declare('TestLayoutWidget', _LayoutWidget, {
					startup: function(){
						if(this._started){
							this._doubleStarted = true;
						}
						this.inherited(arguments);
					},
					destroy: function(){
						if(this._destroyed){
							this._doubleDestroyed = true;
						}
						this.inherited(arguments);
						this._destroyed = true;
					}
				});

				declare('TestCtnrWidget', [_WidgetBase, _Container], {
					startup: function(){
						if(this._started){
							this._doubleStarted = true;
						}
						this.inherited(arguments);
					},
					destroy: function(){
						if(this._destroyed){
							this._doubleDestroyed = true;
						}
						this.inherited(arguments);
						this._destroyed = true;
					}
				});

				declare('TestCtndWidget', [_WidgetBase, _Contained], {
					startup: function(){
						if(this._started){
							this._doubleStarted = true;
						}
						this.inherited(arguments);
					},
					destroy: function(){
						if(this._destroyed){
							this._doubleDestroyed = true;
						}
						this.inherited(arguments);
						this._destroyed = true;
					}
				});

				declare('TestNonCtnrWidget', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
					templateString: "<div data-dojo-attach-point=containerNode></div>",
					startup: function(){
						if(this._started){
							this._doubleStarted = true;
						}
						this.inherited(arguments);
					},
					destroy: function(){
						if(this._destroyed){
							this._doubleDestroyed = true;
						}
						this.inherited(arguments);
						this._destroyed = true;
					}
				});

				declare('TestStubWidget', _WidgetBase, {
					startup: function(){
						if(this._started){
							this._doubleStarted = true;
						}
						this.inherited(arguments);
					},
					destroy: function(){
						if(this._destroyed){
							this._doubleDestroyed = true;
						}
						this.inherited(arguments);
						this._destroyed = true;
					}
				});
	
				declare('Test5Widget',
					[_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin],
				{
					templateString: dom.byId('Test5Template').value,
					startup: function(){
						if(this._started){
							this._doubleStarted = true;
						}
						this.inherited(arguments);
					},
					destroy: function(){
						if(this._destroyed){
							this._doubleDestroyed = true;
						}
						this.inherited(arguments);
						this._destroyed = true;
					}
				});

				declare('Test6Widget', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
					templateString: dom.byId('Test6Template').value,
					clickCount: 0,
					handleClick: function(){
						this.clickCount++;
					}
				});

				declare("Missing", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
					templateString: '<div>' +
										'<div data-dojo-type="dijit/layout/ContentPane">' +
											'<div data-dojo-type="dijit/form/Button" data-dojo-props="id: \'missingButtonId\'" ' +
											'data-dojo-attach-point="missingButton">Missing...</div>' +
										'</div>' +
									'</div>'
				});

				function getTestWidgets(testW){
					return [
						testW,
						testW.layout,
						testW.layChild1,
						testW.layChild2,
						testW.container,
						testW.contained1,
						testW.contained2,
						testW.nonContainer,
						testW.nonContained1,
						testW.nonContained2,
						testW.threeLevel,
						testW.secondLevel,
						testW.bottomLevel,
						testW.anotherThree,
						testW.anotherSecond,
						testW.anotherBottom,
						testW.stub1
					];
				}
		
				function validateTest5Widget(t, testW){
					// Check that everything got started, but not double-started
					array.forEach(getTestWidgets(testW), function(w){
						doh.t(w._started, "w._started: " + w);
						doh.is(undefined, w._doubleStarted, "w._doubleStarted: " + w);
					});
				}
		
				function validateTest5WidgetDestroy(t, testW){
					var savedWidgets = getTestWidgets(testW);
					testW.destroy();
					array.forEach(savedWidgets, function(w, idx){
						doh.t(w._destroyed, "w._destroyed: " + w);
						doh.is(undefined, w._doubleDestroyed, "w._doubleDestroyed: " + w);
					});
				}

				doh.register("_AttachMixin-widgetInTemplate", [
					function createAttachWidgetsCombo() {
						/*** TEST _AttachMixin combined with _WidgetsInTemplateMixin ***/
						var AttachWidgetsCombo = declare([ _WidgetBase, _AttachMixin, _WidgetsInTemplateMixin ], {

							postCreate: function() {
								html.set(this.heading, "Amazing things will happen if you click this button!!!");
							},
							_buttonClicked: function(e) {
								html.set(this.heading, "Well that was boring. " +
										"My attach point button thinks it is a " + (this.mybutton.isInstanceOf(Button) ? 'dijit/form/Button':'Gruffalo'));
							}
						});

						var myawc = new AttachWidgetsCombo({}, dom.byId('attachMeThree'));

						doh.t(myawc.heading, "heading");
						doh.t(myawc.mybutton, "mybutton");
						doh.is("Amazing things will happen if you click this button!!!", myawc.heading.innerHTML, "Initial value");

						// Simulate a change
						myawc.mybutton.onClick();

						doh.is("Well that was boring. My attach point button thinks it is a dijit/form/Button", myawc.heading.innerHTML, "Post-op value");
					},

					function containerNode(){
						// Test that widgets inside of containerNode aren't parsed by _WidgetsInTemplateMixin

						declare("OuterWidget", [ _WidgetBase, _AttachMixin, _WidgetsInTemplateMixin ], {
							// Prevent the main parser call from hitting my supporting widgets.
							// But this also stops the parser from hitting anything inside my containerNode, so I need
							// to do a recursive parse() like ContentPane does (or just extend ContentPane)
							stopParser: true,

							postCreate: function(){
								doh.is(0, this.getChildren().length, "contained widget not created yet");
								parser.parse(this.containerNode);
							}
						});
						declare("SupportingWidget", _WidgetBase);
						declare("ContainedWidget", _WidgetBase);
						parser.parse(dom.byId("containerNode"));

						doh.t("outerWidget" in window, "outer widget created");
						doh.t(outerWidget.supportingWidget, "supporting widget instantiated");
						doh.f(outerWidget.containedWidget, "contained widget not instantiated by _WidgetsInTemplateMixin parse call");

						doh.is(1, outerWidget.getChildren().length, "contained widget created too");
					}
				]);

				doh.register("_Templated-widgetsInTemplate", [
					function parse(){
						parser.parse("templateTests");
					},
					{
						name: "data-dojo-attach-point",
						runTest: function(t){
							var testW = registry.byId("test1Widget");
							doh.t(testW, "test1Widget was instantiated");
							doh.t(testW.normalNode, "normalNode");
							doh.f(isNaN(testW.normalNode.nodeType), "normalNode.nodeType");
							doh.t(testW.buttonWidget instanceof Button, "buttonWidget is Button");
							doh.t(testW.checkboxWidget instanceof CheckBox, "checkboxWidget is CheckBox");
							doh.t(testW.progressBarWidget instanceof ProgressBar, "progressBarWidget is ProgressBar");
						}
					},
					{
						name: "data-dojo-attach-event",
						runTest: function(t){
							var testW = registry.byId("test1Widget");
							testW.buttonWidget._counter=0;
							testW.buttonWidget.onClick(testW.buttonWidget);
							testW.checkboxWidget._counter=0;
							testW.checkboxWidget.onClick(testW.checkboxWidget);
							testW.progressBarWidget._counter=0;
							testW.progressBarWidget.onChange(testW.progressBarWidget);
							doh.is(1,testW.buttonWidget._counter, "buttonWidget._counter");
							doh.is(1,testW.checkboxWidget._counter, "checkboxWidget._counter");
							doh.is(1,testW.progressBarWidget._counter, "progressBarWidget._counter");
						}
					},
					{
						name: "data-dojo-attach-event strange name",
						runTest: function(t){
							// This is for testing data-dojo-attach-event to attach to a method in the widget,
							// rather than using _WidgetBase.on(...).   Remove for 2.0.
							var SubWidget = declare("SubWidget", _WidgetBase, {
								f: function(){
									// just for attaching to
								}
							});
							var MainWidget = declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
								templateString:
									'<div>' +
										'<div data-dojo-type="SubWidget" data-dojo-attach-point="sw" ' +
											' data-dojo-attach-event="f: g">' +
									'</div>',
								g: function(){
									this.gWasCalled = true;
								}
							});
							var mw = new MainWidget();
							doh.t(mw.sw, "attach-point exists");
							mw.sw.f();
							doh.t(mw.gWasCalled, "attach-event worked");
						}
					},
					{
						// Test that getDescendants ()
						// finds direct descendants but skips widgetsInTemplates
						// and also nested widgets (if direct==true)
						name: "getChildren",
						runTest: function(t){
							var testW = registry.byId("test3Widget");

/*** performance tests
							var start = new Date();
							for(var i=0; i<1000; i++)
								testW.getChildren();
							console.log("*** time for getChildren(): " + (new Date()-start));
							var start = new Date();
							for(var i=0; i<1000; i++)
								testW.getDescendants();
							console.log("*** time for getDescendants(false): " + (new Date()-start));
***/
							var chil = testW.getChildren();
							doh.is(5, chil.length, "number of direct descendants");
							doh.is(chil[0].id, "3.1");
							doh.is(chil[1].id, "3.2");
							doh.is(chil[2].id, "3.3");
							doh.is(chil[3].id, "3.4");
							doh.is(chil[4].id, "3.5");

							// remove this test for 2.0
							var desc = testW.getDescendants();
							doh.is(7, desc.length, "number of descendants (including nested ones)");
							doh.is(desc[0].id, "3.1");
							doh.is(desc[1].id, "3.2");
							doh.is(desc[2].id, "3.3");
							doh.is(desc[3].id, "3.nested");
							doh.is(desc[4].id, "3.nested2");
							doh.is(desc[5].id, "3.4");
							doh.is(desc[6].id, "3.5");
						}
					},
					{
						// Check that declarative widget with layout widgets in template is correctly created and rendered
						name: "declarative widget with layout widgets",
						runTest: function(t){
							validateTest4Widget(t, registry.byId("test4Widget"));
						}
					},
					{
						// Check that programatic widget with layout widgets in template is correctly created and rendered
						name: "programmatic widget with layout widgets",
						runTest: function(t){
							test4WidgetProgrammatic = new Test4Widget({}).placeAt("test4Widget", "after");
							test4WidgetProgrammatic.startup();
							validateTest4Widget(t, test4WidgetProgrammatic);
						}
					},
					{
						// Compare programmatic and declaratively created widget with layout widgets in template
						name: "programmatic vs declarative with layout widgets",
						runTest: function(t){
							// Focus the body, so that we don't have different classes on our
							// two widgets
							focusUtil.focus(win.body());
							var declW = registry.byId("test4Widget");
							var progW = test4WidgetProgrammatic;

							// Check that generated HTML in DOM is same
							var declNeutralHtml = declW.domNode.innerHTML.replace(/_\d+/g, "");
							var progNeutralHtml = progW.domNode.innerHTML.replace(/_\d+/g, "");
							if(declNeutralHtml != progNeutralHtml){
								for(var i=0; i<declNeutralHtml.length; i++){
									if(progNeutralHtml.charAt(i) != declNeutralHtml.charAt(i)){
										console.log("***Difference starting at " + i);
										console.log("declarative: " + declNeutralHtml.substr(Math.max(0, i-5), 50));
										console.log("programmatic: " + progNeutralHtml.substr(Math.max(0, i-5), 50));
										break;
									}
								}
								doh.t(declNeutralHtml == progNeutralHtml, "declNeutralHtml == progNeutralHtml");
							}

							// Check that dimensions are same
							var declBox = domGeom.getContentBox(declW.domNode);
							var progBox = domGeom.getContentBox(progW.domNode);
							doh.is(declBox.h, progBox.h, "progBox.h");
							doh.is(declBox.w, progBox.w, "progBox.w");
						}
					},
					{
						// Check that declarative widget with other widgets in template is correctly started
						name: "declarative widget with many child widgets",
						runTest: function(t){
							validateTest5Widget(t, registry.byId("test5Widget"));
						}
					},
					{
						// Check that programmatic widget with other widgets in template is correctly started
						name: "programmatic widget with many child widgets",
						runTest: function(t){
							test5WidgetProgrammatic = new Test5Widget().placeAt("test5Widget", "after");
							test5WidgetProgrammatic.startup();
							validateTest5Widget(t, test5WidgetProgrammatic);
						}
					},
					{
						// Check that destroying our declarative widget works correctly
						name: "declarative widget destruction",
						runTest: function(t){
							validateTest5WidgetDestroy(t, registry.byId("test5Widget"));
						}
					},
					{
						// Check that destroying our programmatic widget works correctly
						name: "programmatic widget destruction",
						runTest: function(t){
							validateTest5WidgetDestroy(t, test5WidgetProgrammatic);
						}
					},
					{
						// Test that data-dojo-attach-point inside of a ContentPane (inside of a template) works
						name: "ContentPane",
						runTest: function(){
							var testW = registry.byId("missing");
							doh.t(testW, "widget was created");
							doh.t(testW.missingButton, "data-dojo-attach-point created");
							doh.is("dijit.form.Button", testW.missingButton.declaredClass, "and it's to a widget");
							doh.t(registry.byId("missingButtonId"), "nested widget also registered by id");
						}
					},
					{
						// Test that data-dojo-attach-event bindings work with widgets in template, when
						// binding to dijit/_Widget methods
						name: "_Widget Deferred Connect methods",
						runTest: function(){
							var test6Widget = registry.byId("test6Widget");
							doh.t(test6Widget.clickCount === 0, "click count was initially zero");
							// Issue a 'click' event directly on the interior input of the TextBox
							test6Widget.textbox.textbox.click();
							doh.t(test6Widget.clickCount === 1, "click count incremented properly");
						}
					}
				]);

				// Test that "this" referenced from data-dojo-props can refer to the hosting widget
				doh.register("data-dojo-props this", function(){
					var host = declare([dijit._WidgetBase, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin], {
						obj: {hello: "world"},
						templateString:
							"<div>" +
								"<div data-dojo-type='dijit/_WidgetBase' data-dojo-props='hostObj: this.obj'" +
								" data-dojo-attach-point='subWidget'></div>" +
							"</div>"
					});
					
					var hostWidget = new host(),
						subWidget = hostWidget && hostWidget.subWidget;
					doh.isNot(undefined, hostWidget, "created host widget");
					doh.isNot(undefined, subWidget, "created sub widget");
					doh.isNot(undefined, subWidget.hostObj, "sub widget got hostObj defined");
					doh.is("world", subWidget.hostObj.hello, "object is correct")
				});

				// Test that a context require can be passed to the parser
				doh.register("context require", function(){
					var cw = registry.byId("testContextWidget");
					doh.is(typeof cw.fooNode, "object", "button created");
					doh.is(cw.fooNode.fooNode.innerHTML, "TestWidget", "sub widget contains right properties");
				});

				doh.run();
			});
		</script>
	</head>
	<body class="claro">
		<h1>WidgetsInTemplateMixin</h1>

		<!-- Tests for _WidgetsInTemplateMixin combined with _AttachMixin -->
		<div class="testcontainer">
			<p>This test shows that a _AttachMixin dijit with _WidgetsInTemplate properly attaches widgets from the template.<br>
			<div id="attachMeThree">
				<h2 data-dojo-attach-point='heading'></h2>
				<button data-dojo-type='dijit/form/Button'
						data-dojo-attach-point='mybutton'
						data-dojo-attach-event='onClick: _buttonClicked'>A button</button>
			</div>
		</div>

		<!-- Test that widgets inside containerNode aren't parsed by _WidgetsInTemplateMixin-->
		<div id="containerNode" class="testcontainer">
			<p>This tests that nodes inside of data-dojo-attach-point="containerNode" are ignored<br>
			<div data-dojo-id="outerWidget" data-dojo-type="OuterWidget">
				<h2 data-dojo-attach-point="heading">heading</h2>
				<div data-dojo-type="SupportingWidget" data-dojo-attach-point="supportingWidget">supporting widget</div>
				<div data-dojo-attach-point="containerNode">
					<span data-dojo-type="ContainedWidget" data-dojo-attach-point="containedWidget">contained widget</span>
				</div>
			</div>
		</div>

		<!-- Tests for _WidgetsInTemplateMixin combined with _TemplatedMixin -->
		<div id="templateTests">
			<textarea id="Test1Template" style="display:none;">
				<div>
					<div data-dojo-attach-point="normalNode">normal node</div>
					<button data-dojo-attach-point="buttonWidget" data-dojo-attach-event="onClick:onClick" data-dojo-type="dijit/form/Button">button #1</button>
					<div data-dojo-attach-point="checkboxWidget" data-dojo-attach-event="onClick:onClick" data-dojo-type="dijit/form/CheckBox"></div> checkbox #1
					<div data-dojo-attach-point="progressBarWidget" data-dojo-attach-event="onChange:onClick"
						 data-dojo-type="dijit/ProgressBar" data-dojo-props='value: 20, maximum: 200, style: "width:400px;"'></div>
				</div>
			</textarea>

			<div data-dojo-type="Test1Widget" data-dojo-props="id: 'test1Widget'"></div>


			<textarea id="Test3Template" style="display:none;">
				<div>
					<div data-dojo-attach-point="checkboxWidget" data-dojo-type="dijit/form/CheckBox"></div> checkbox #3
					<div data-dojo-attach-point="containerNode"></div>
				</div>
			</textarea>

			<div data-dojo-type="Test3Widget" data-dojo-props="id: 'test3Widget'">
				<span>hello world</span>
				<b style="border: 1px solid blue;">this is my
					<button data-dojo-type="dijit/form/Button" data-dojo-props="id: '3.1'">first button</button>
				</b>
				<button data-dojo-type="dijit/form/Button" data-dojo-props="id: '3.2'">another button</button>
				<i>and some more</i>
				<div style="border: 1px solid red;">
					<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="style: {border: '1px solid gray'}, id: '3.3'">
						<button data-dojo-type="dijit/form/Button" data-dojo-props="id: '3.nested'">a nested button</button>
						<button data-dojo-type="dijit/form/Button" data-dojo-props="id: '3.nested2'">another nested button</button>
					</div>
					<button data-dojo-type="dijit/form/Button" data-dojo-props="id: '3.4'">yet another button</button>
					<button data-dojo-type="dijit/form/Button" data-dojo-props="id: '3.5'">yet yet another button</button>
				</div>
			</div>

			<!-- Test templated widget containing layout widgets in template -->
			<textarea id="Test4Template" style="display:none;">
				<div>
					<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="style: {height: '5em', width: '100em'}" data-dojo-attach-point="tabCont">
						<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Tab 1'" data-dojo-attach-point="tab1">
							pane 1
						</div>
						<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Tab 2'" data-dojo-attach-point="tab2">
							pane 2
						</div>
					</div>
				</div>
			</textarea>

			<div data-dojo-type="Test4Widget" data-dojo-props="id: 'test4Widget'"></div>

			<!-- Test templated widget containing container and nested widgets in template -->
			<textarea id="Test5Template" style="display:none;">
				<div>
					<div data-dojo-type="TestLayoutWidget" data-dojo-attach-point="layout">
						<div data-dojo-type="TestCtndWidget" data-dojo-attach-point="layChild1"></div>
						<div data-dojo-type="TestCtndWidget" data-dojo-attach-point="layChild2"></div>
					</div>
					<div data-dojo-type="TestCtnrWidget" data-dojo-attach-point="container">
						<div data-dojo-type="TestCtndWidget" data-dojo-attach-point="contained1"></div>
						<div data-dojo-type="TestCtndWidget" data-dojo-attach-point="contained2"></div>
					</div>
					<div data-dojo-type="TestStubWidget" data-dojo-attach-point="stub1"></div>
					<div data-dojo-type="TestNonCtnrWidget" data-dojo-attach-point="nonContainer">
						<div data-dojo-type="TestStubWidget" data-dojo-attach-point="nonContained1"></div>
						<div data-dojo-type="TestStubWidget" data-dojo-attach-point="nonContained2"></div>
					</div>
					<div data-dojo-type="TestCtnrWidget" data-dojo-attach-point="threeLevel">
						<div data-dojo-type="TestNonCtnrWidget" data-dojo-attach-point="secondLevel">
							<div data-dojo-type="TestStubWidget" data-dojo-attach-point="bottomLevel"></div>
						</div>
					</div>
					<div data-dojo-type="TestNonCtnrWidget" data-dojo-attach-point="anotherThree">
						<div data-dojo-type="TestCtnrWidget" data-dojo-attach-point="anotherSecond">
							<div data-dojo-type="TestCtndWidget" data-dojo-attach-point="anotherBottom"></div>
						</div>
					</div>
				</div>
			</textarea>

			<div data-dojo-type="Test5Widget" data-dojo-props="id: 'test5Widget'"></div>

			<div data-dojo-type="Missing" data-dojo-props="id: 'missing'"></div>

			<!-- Test templated widget containing relative MIDs for data-dojo-type -->
			<div data-dojo-type="dijit/tests/resources/TestContextRequireWidget" data-dojo-props="id: 'testContextWidget'"></div>

			<!-- Test templated widget for back-compat with inherited onClick etc events when using widgets in template -->
			<textarea id="Test6Template" style="display:none;">
				<div>
					<div data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="textbox" data-dojo-attach-event="onClick: handleClick"></div>
				</div>
			</textarea>

			<div data-dojo-type="Test6Widget" data-dojo-props="id: 'test6Widget'"></div>

		</div>

	</body>
</html>
